<template>
    <div class="bi-country-select">
        <ui-navbar 
            v-if="type === 'navbar'"
            :value="currentCounty"
            :data="data" 
            text-field="label" 
            @change="handleNavbarChange"
        ></ui-navbar>
        <ui-dropdown 
            v-else-if="type === 'picker'"
            :value="currentCounty"
            :data="data"
            text-field="label" 
            @change="handleDropdownChange"
        >
            <template slot="handle" slot-scope="{item}">
                {{item ? item.label : '选择区域'}}
            </template>
        </ui-dropdown>
    </div>
</template>
<script>
import UiNavbar from 'board/components/navbar'
import UiDropdown from 'board/components/dropdown'

export default {
    name: 'BiCountySelect',
    components: {
        UiNavbar,
        UiDropdown
    },
    props: {
        value: {
            type: [String, Number]
        },
        data: {
            type: Array,
            default: () => []
        },
        type: {
            type: String,
            default: 'navbar',
            validator (value) {
                return ['navbar', 'picker'].indexOf(value) >= 0
            }
        }
    },
    data () {
        return {
            currentCounty: this.value
        }
    },
    watch: {
        value () {
            this.currentCounty = this.value
        }
    },
    methods: {
        handleNavbarChange (evt) {
            this.currentCounty = evt.value
            this.$emit('change', evt)
        },
        handleDropdownChange (evt) {
            this.currentCounty = evt.value
            this.$emit('change', evt)
        }
    }
}
</script>